<template>
  <div class="map-wrapper" :style="styles">
      <div class="link">
        <template v-for="(item, index) in drillLink">
          <span :key="index" class="select-name" :style="{'color': drillLink.length - 1 == index ? '#01DAF9' : 'white'}" @click="drillLink.length - 1 !== index && selectName(item)">{{ item.name }}</span>
          <i v-show="drillLink.length - 1 !== index" :key="`icon-${index}`" class="icon ivu-icon ivu-icon-ios-arrow-forward" />
        </template>
      </div>
      <vue-baidu-map v-if="showBaiduMap" :selectedName="selectedName"/>
      <echart-map v-else ref="EchartMap"
      @showBaiduMap="showBaiduMap = true"
      @onLoadMap="onLoadMap" />
  </div>
</template>
<script>
import EchartMap from './echart-map.vue'
import VueBaiduMap from './../baidu-map/baidu-map.vue'
import getSysOrgList from './../../../public/china-main-city/getSysOrgList.json'
export default {
  name: 'EMapDrilldown',
  components: {
    EchartMap,
    VueBaiduMap
  },
  props: {
    styles: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      drillLink: [],
      showBaiduMap: false,
      selectedName: ''
    }
  },
  computed: {
    getSysOrgList () {
      return getSysOrgList.data
    }
  },
  methods: {
    selectName (item) {
      if (this.showBaiduMap) {
        // show百度地图
      }
      this.handleAreaName(item)
      this.$nextTick(() => {
        this.$refs.EchartMap.loadMap(item.name)
      })
    },
    handleAreaName (item) {
      // 根据name把其拼接成 (4)-[1860]-{顺河回族区}的形式
      console.log(`(${item.optType})-[${item.id}]-{${item.name}}`)
      this.$emit('on-load-map')
    },
    onLoadMap(obj) {
      if (obj.optType === 4 || obj.optType === 5) this.selectedName = obj.name
    }
  }
}
</script>
<style scoped>
</style>
